@import "../../styl/variable.styl"
@import "../../styl/shape.styl"

.player
  background-color $primary-color
  border-radius 0 0 8rpx 8rpx
  color white
  flex 1

  &.one-line
    border-radius 8rpx
    display flex
    flex-direction row

    .controls
      display flex
      flex-direction row
      padding 10rpx
      flex 1 0 110rpx

    .play-button
    .pause-button
      margin 0

    slider
      width 300rpx

  &.playback
    padding 0 40rpx
    align-items center
    justify-content center

.progress-bar
  display flex
  justify-content center
  align-items center
  padding 30rpx 0 20rpx

slider
  width 386rpx

.current,
.total
  font-size 24rpx
  width 80rpx
  text-align center

.controls
  display flex
  justify-content center
  align-items center
  padding-bottom 40rpx

.play-button,
.pause-button,
.backward-button,
.forward-button
  background-color $primary-color
  border 10rpx solid white
  border-radius 50%
  padding 0
  display flex
  justify-content center
  align-items center

.play-button,
.pause-button
  width 90rpx
  height 90rpx
  margin 0 50rpx

  &.loading view
    display none

.play-button view
  margin-left 10rpx
  triangle-right(18rpx, 30rpx, white)

.pause-button view
  border-left 10rpx white solid
  border-right 10rpx white solid
  width 30rpx
  height 36rpx

.backward-button,
.forward-button
  width 75rpx
  height 75rpx
  margin 0
  position relative

  view
    margin-right 6rpx
    triangle-right(12rpx, 16rpx, white)

    &:after
      content: ''
      triangle-right(12rpx, 16rpx, white)
      position absolute
      top 17rpx
      left 30rpx

.backward-button
  transform rotate(-180deg)

.full
  display flex
  flex-direction column

  .controls
    order 2

  .progress-bar
    order 1

.avatar
  width 90rpx
  height 90rpx
  border 10rpx solid white
  border-radius 50%
  margin-left auto